<template>
  <div id="app">
    <!-- 头部 -->
    <div class="header-view">
        <div class="header-title"></div>
        <div class="header-content">
          <p style="font-size:41px;letter-spacing: 15px;">停车位管理系统</p>
          <!--<p style="font-size:12px;">{{time}}</p>-->
        </div>
        <div class="header-footer"></div>
        <heardIndex></heardIndex>
    </div>
    <!-- 左侧区域 -->
    <div>
    <!-- 主题内容 -->
    <div class="main-view">
      <div class="main-view-left">
        <div class="main-view-left-top">
          <TitleView title="报警信息"></TitleView>
          <div style="margin-top:20px"></div>
          <alarmInfo :dataVal="dataVal"></alarmInfo>
          <!-- <div style="margin-top:50px"></div>
          <TitleView title="实时报警数据"></TitleView>
          <oilWarning></oilWarning> -->
        </div>
        <div class="main-view-left-zhong">
          <TitleView title="实时报警数据"></TitleView>
          <div style="margin-top:20px"></div>
          <oilWarning2 @aaa="aaa"></oilWarning2>
        </div>
        <div class="main-view-left-bottom">
          <TitleView title="违停类型是否处置"></TitleView>
          <parking-violation></parking-violation>

          <!--<oilWarning></oilWarning>
          <alarmStatistics></alarmStatistics>-->
          <!-- <threePieView/>-->
          <!-- <div style="height: 90%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;">
            <img src="./assets/img/3d.png" style="height:200px;width:200px;"/>
          </div>-->
        </div> 
      </div>
      <div class="main-view-center">
        <div class="main-view-center-top">
          <contentVideo></contentVideo>
        </div>
        <div class="main-view-center-bottom">
          <TitleView title="告警处置详情"></TitleView>
          <!-- <HistoricalList></HistoricalList> -->
          <oilWarning4></oilWarning4>
        </div>
      </div>
      <div class="main-view-right">
        <div class="main-view-right-top">
          <TitleView style="width:calc(100% - 40px);text-align:left;" title="车位信息汇总"></TitleView>
          <div style="margin-top:20px"></div>
          <stallInfo></stallInfo>
        </div>
        <div class="main-view-right-center">
          <TitleView style="width:calc(100% - 40px);text-align:left;padding-right:40px;" title="危化品车预警处置"></TitleView>
          <oilWarning></oilWarning>
        </div>
        <div class="main-view-right-bottom">
          <TitleView style="width:calc(100% - 40px);text-align:left;padding-right:40px;" title="防偷油预警警告"></TitleView>
          <oilWarning3></oilWarning3>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import * as echarts from "echarts";
import pieComponent from './components/pieComponent.vue'
import alarmLeft from './components/alarmLeft.vue'//报警信息
import lineComponent from "./components/lineComponent.vue";
import RadarchartComponent from "./components/RadarchartComponent.vue";//服务满意度
import ParkingInformation from '@/components/ParkingInformation'//车位信息汇总
import HistoricalList from '@/components/HistoricalList'//历史记录
import TitleView from './components/TitleView.vue'//通用标题
import threePieView from './components/threePieView'//通用标题

import alarmStatistics from "./components/tableView/alarmStatistics" //左一 告警信息统计
import contentVideo from "./components/tableView/contentVideo" //中一 实时视频
import oilWarning from "./components/tableView/oilWarning" //右二 偷油预警
import oilWarning2 from "./components/tableView/oilWarning2" //右二 偷油预警
import oilWarning3 from "./components/tableView/oilWarning3" //右二 偷油预警
import oilWarning4 from "./components/tableView/oilWarning4" //右二 偷油预警
import parkingViolation from "./components/parkingViolation" //右三 违停处置

import heardIndex from "./components/heard/index" //头部动画
import alarmInfo from "./components/alarmInfo/index" //左一 报警信息
import stallInfo from "./components/stallInfo/index" //左一 报警信息



// import moment from 'moment';
export default {
  name: "App",
  components: {
    oilWarning4,
    oilWarning3,
    threePieView,
    lineComponent,
    alarmLeft,
    RadarchartComponent,
    ParkingInformation,
    HistoricalList,
    TitleView,
    pieComponent,
    parkingViolation,
    alarmStatistics,
    contentVideo,
    oilWarning,
    alarmInfo,
    heardIndex,
    stallInfo,
    oilWarning2
  },
  mounted() {
    // this.getTime()
    setInterval(this.updateTime, 1000);
    
  },
  methods: {
     updateTime() {
      const now = new Date();
    const year = now.getFullYear();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    this.time = currentTime
}

// 每秒更新一次时间
  },
  data() {
    return {
      dataVal:{
        a:0,
        b:1,
        c:2,
        d:9,
        a1:2,
        b1:132
      },
      time:"",
      // line配置项木
      lineClass: "main", // 线形状id
    };
  },
  methods:{
    aaa(val){
      console.log("aaa",val)
      if (val == 0) {
        this.dataVal = {
          a:0,
          b:1,
          c:2,
          d:9,
          a1:0,
          b1:129
        }
      } else {
        this.dataVal = {
          a:0,
          b:1,
          c:3,
          d:2,
          a1:1,
          b1:131
        }
      }
    }
  }
};
</script>

<style>
#app {
  width: 100%;
  height: 100vh;
  /* 设置背景图片为指定路径下的图片 */
  background-image: url('./assets/bg.png');
  color: #fff;

  /* 使背景图片铺满整个元素 */
  background-size: cover;
  overflow: hidden;
}
#app .header-view{
  height:76px;
  width: 100%;
  /*background-color: #000000;
  opacity: 0.5;*/
  position: relative;
  display: flex;
  justify-content: center;
}
.header-view .header-title{
  height:40px;
  width: 100%;
  background: linear-gradient(#022346, #2B579A);
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
}

.header-content{
  font-size: 35px;
  font-weight: bold;
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 100;
  text-align: center;
  transform: translateX(-50%);
  font-weight: bold;
    color: #fff;
    text-shadow: 5px 0px 10px #fff;
}
.header-footer{
  width: 44.5%;
  height: 35px;
  opacity: 0.5;
  position: absolute;
  top: 40px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid #2B579A;
}
.main-view{
  height:calc( 100vh - 76px);
  width: 100%;
  display: flex;
  justify-content: center;
}
.main-view-left{
  height: 100%;
  width: calc(25% - 40px);
}
.main-view-left-top{
  height: calc( 100% / 3);
  height: 390px;
  width: 100%;
  background-image: url('./assets/img/left.svg');
  background-repeat: no-repeat; /* 防止图片重复 */
  background-size: 79.2px 132px;
  background-position: 0px 0px; /* 水平和垂直偏移量 */
  padding-left:35px;
}
.main-view-left-zhong{
  height: calc( 100% / 3);
  height: 280px;
  width: 98%;
  background-image: url('./assets/img/left.svg');
  background-repeat: no-repeat; /* 防止图片重复 */
  background-size: 79.2px 132px;
  background-position: 0px 0px; /* 水平和垂直偏移量 */
  padding-left:35px;
}
.main-view-left-bottom{
  height: calc( 100% / 3);
  height: calc( 100% - 650px);
  width: calc( 100% );
  background-image: url('./assets/img/left.svg');
  background-repeat: no-repeat; /* 防止图片重复 */
  background-size: 79.2px 132px;
  background-position: 0px 0px; /* 水平和垂直偏移量 */
  padding-left:35px;
}
.main-view .main-view-center{
   
    height: calc(100% - 10px);
    width: 50%;
    padding:0px 10px;
    padding-bottom: 10px;
}
.main-view-center-top{
  margin:50px;
  width:calc(100% - 100px) ;
  height:calc(55% ) ;
  overflow: hidden;
}
/* .main-view-center-bottom{
  overflow: auto;
  height: 60%;
  width: 100%;
} */

.main-view-center-bottom {
  /* overflow: auto; */
  /*margin-top:150px;*/
  padding-left: 40px;
  margin-left:40px;
  width:calc(100% - 130px) ;
  height:calc(45% ) ;
  background-image: url('./assets/img/left.svg');
  background-repeat: no-repeat; /* 防止图片重复 */
  background-size: 79.2px 132px;
  background-position:0px 0px; /* 水平和垂直偏移量 */
 
  /* scrollbar-width: thin; For Firefox */
  /* scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0); */
   /* For Firefox */

  /* WebKit-based browsers */
}

/* Customize scrollbar for WebKit-based browsers */
.main-view-center-bottom::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
}

/* Track */
.main-view-center-bottom::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1); /* Set the background color of the track */
}

/* Handle */
.main-view-center-bottom::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5); /* Set the color of the scrollbar handle */
  border-radius: 5px; /* Add rounded corners to the scrollbar handle */
}

.main-view .main-view-right{
    height: 100%;
    width: calc(25% - 40px);
}
.main-view-right-top, .main-view-right-center, .main-view-right-bottom{
  width: calc(100% - 40px);
  background-image: url('./assets/img/left.svg');
  background-repeat: no-repeat; /* 防止图片重复 */
  background-size: 79.2px 132px;
  background-position:0px 0px; /* 水平和垂直偏移量 */
  padding-left:40px;
}
/*.main-view-right-top{
  height:calc( (100% / 3) - 110px);
}
main-view-right-center, .main-view-right-bottom{
  height:calc( (100% - ((100% / 3) - 110px)) / 2 - 40px);
  margin-top:10px;
}*/
.main-view-right-top{
  height:calc( 40% - 110px);
}
.main-view-right-center{
  height:calc( 22% + 121px);
}
.main-view-right-bottom{
  height:calc( 45%);
}
</style>
